import { defineComponent, ref, watch, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, normalizeStyle } from "vue";
import "./color-select.vue.mjs";
import { Popover } from "ant-design-vue";
import _sfc_main$1 from "./color-select.vue2.mjs";
const _hoisted_1 = { class: "me-color-picker" };
const _hoisted_2 = { class: "me-color-picker-inner" };
const _hoisted_3 = { class: "me-color-picker-content" };
const _hoisted_4 = { class: "me-color-picker-box" };
const _hoisted_5 = { class: "me-color-picker-popover-content" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "me-color-picker"
  },
  __name: "color-picker",
  props: {
    color: { default: "" },
    colorList: { default() {
      return [];
    } }
  },
  emits: ["update:color", "change", "input"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const colorSelector = ref();
    const emits = __emit;
    const visible = ref(false);
    const color = ref(props.color || "");
    const preColor = ref(color.value);
    const colorList = ref(props.colorList.length > 0 ? props.colorList : [
      "#D0021B",
      "#F5A623",
      "#F8E71C",
      "#8B572A",
      "#7ED321",
      "#417505",
      "#BD10E0",
      "#9013FE",
      "#4A90E2",
      "#50E3C2",
      "#B8E986",
      "#000000",
      "#4A4A4A",
      "#9B9B9B",
      "#FFFFFF"
    ]);
    watch(() => props.color, () => {
      color.value = props.color;
      preColor.value = color.value;
    });
    const onActiveChange = (value) => {
      color.value = value;
      emits("input", value);
    };
    const onVisibleChange = (visible2) => {
      if (!visible2) {
        color.value = preColor.value;
        colorSelector.value.updateColor(color.value);
      }
    };
    const onChange = (value) => {
      visible.value = false;
      color.value = value;
      preColor.value = value;
      emits("update:color", value);
      emits("change", value);
    };
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Popover), {
        trigger: "click",
        onVisibleChange,
        visible: visible.value,
        "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event)
      }, {
        content: withCtx(() => [
          createElementVNode("div", _hoisted_5, [
            createVNode(_sfc_main$1, {
              ref_key: "colorSelector",
              ref: colorSelector,
              color: preColor.value,
              colorList: colorList.value,
              onActiveChange,
              onChange
            }, null, 8, ["color", "colorList"])
          ])
        ]),
        default: withCtx(() => [
          createElementVNode("div", _hoisted_1, [
            createElementVNode("div", _hoisted_2, [
              createElementVNode("div", _hoisted_3, [
                createElementVNode("div", _hoisted_4, [
                  createElementVNode("div", {
                    class: "me-color-picker-box-value",
                    style: normalizeStyle({ backgroundColor: color.value })
                  }, null, 4)
                ])
              ]),
              _cache[1] || (_cache[1] = createElementVNode("div", { class: "me-color-picker-arrow" }, [
                createElementVNode("svg", {
                  focusable: "false",
                  class: "me-color-picker-arrow-btn",
                  "data-icon": "down",
                  width: "1em",
                  height: "1em",
                  fill: "currentColor",
                  "aria-hidden": "true",
                  viewBox: "64 64 896 896"
                }, [
                  createElementVNode("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" })
                ])
              ], -1))
            ])
          ])
        ]),
        _: 1
      }, 8, ["visible"]);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=color-picker.vue2.mjs.map
